<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>黑马面面</title>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<section class="wrap">
			<!--头部  -->
			<header class="header">
				志涛大傻逼
			</header>
			<!-- 导航 -->
			<nav class="nav">
				<a href="#" class="item">
					<img src="icons/icon1.png" />
					<span>hr面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon2.png" />
					<span>笔试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon3.png" />
					<span>技术面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon4.png" />
					<span>模拟面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon5.png" />
					<span>面试技巧</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon6.png" />
					<span>薪资查询</span>
				</a>
			</nav>
			<!-- go模块 -->
			<section class="go">
				<img src="images/go.png" />
			</section>
		</section>
		<!-- 就业指导模块 -->
		<section class="content">
			<div class="con-hd">
				<h4>
					<span>
						<img src="icons/i2.png" />
					</span>
					就业指导
				</h4>
				<a href="#" class="more">更多</a>
			</div>
			<!-- 旋转木马轮播图 -->
			<div class="get_job_focus">
				<div class="swiper-container get_job_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/2.jpg" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/pic.png" /></a>
							<p>老师教你面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="images/3.jpg" /></a>
							<p>老师教你面试技巧</p>
						</div>
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</section>
		<!-- 第二个轮播图-->
		<section class="content">
			<div class="con-hd">
				<h4>
					<span>
						<img src="icons/i2.png" />
					</span>
					充电学习
				</h4>
				<a href="#" class="more">更多</a>
			</div>
			<!-- 学习模块轮播图 -->
			<div class="study">
				<!-- Swiper -->
				<div class="swiper-mySwiper study_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" />
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>

					</div>
					<div class="swiper-pagination"></div>
				</div>

			</div>
		</section>
		<!-- 底部模块-->
		<footer class="footer">
		    <a href="#">
				<img src="icons/home.png" />
				<p>首页</p>
			</a>
			<a href="#">
				<img src="icons/ms.png" />
				<p>模拟面试</p>
			</a>
			<a href="#">
				<img src="icons/net.png" />
				<p>技术面试</p>
			</a>
			<a href="#">
				<img src="icons/user.png" />
				<p>我的首页</p>
			</a>
		</footer>
		<script src="js/flexible.js"></script>
		<script src="js/swiper.min.js	"></script>
		<script>
			(function() {
				var swiper = new Swiper('.get_job_fo', {
					slidesPerView: 2,
					spaceBetween: 30,
					centeredSlides: true,
					loop: true,
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
				});
			})();
			(function() {
				var swiper = new Swiper(".study_fo", {
					slidesPerView: 2.2,
					spaceBetween: 20,
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
				});
			})();
		</script>
	</body>
</html>
